<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="changePerson">修改数据</button>
      <div>person:{{person}}</div>
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        person: ['小猫', '小兔', '小猪'],
      };
    },
    methods: {
      changePerson() {
        // 1.直接通过下标修改数组，是不具备响应式的
        // this.person[0] = '哈哈哈';
        // 2.通过修改length来修改数据，是不具备响应式的
        // this.person.length = 1;

        // 3.使用数组的方法修改数组的值，数组的方法分为两类：修改原数组和返回新数组
        // 3.1 修改原数组方式（变更方法）如下：push pop shift unshift sort reverse splice
        // Vue 将数组的变更方法进行了包裹，所以它们也将会触发视图更新
        this.person = this.person.map((item) => {
          return item + '=';
        });
      },
    },
  });

  //vue对数组变更方法包裹的伪代码
  // function undateDOM() {
  //   // 更新DOM函数
  // }

  // // 保留旧的push方法
  // const oldPush = Array.prototype.push;
  // // 重写push方法
  // Array.prototype.push = function (...rest) {
  //   // 调用旧的push方法
  //   oldPush.call(this, ...rest);
  //   //更新DOM
  //   updateDOM();
  // };
</script>
